import{d as e,M as n,A as r,h as s}from"./Anchors-CRD96j4l.js";import{D as a,a as d}from"./Demo-Ck8WGKWN.js";import"./index-BpvWz174.js";const c={path:"/layout/space",name:"space",title:"Space 间隔"};function l(i){const t={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",span:"span",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...i.components};return n(s,{children:[n("div",{class:"sys-ctx-main-left",children:[n(t.h1,{id:"sp-",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-",children:e(t.span,{className:"icon icon-link"})}),c.title]}),n(t.h2,{id:"sp-demos",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#sp-demos",children:e(t.span,{className:"icon icon-link"})}),"代码演示 "]}),e(a,{}),e(d,{id:"base",title:"基础用法",src:"1base.demo.tsx",code:`import { Button, Space, Text } from "cui-solid"

export default () => {
    return <Space align="center">
        <Text>文本</Text>
        <Button>Button</Button>
    </Space>
}`,scopes:void 0,children:e(t.p,{children:"默认横向布局，并添加间隔， 默认垂直居中"})}),e(d,{id:"vertical",title:"垂直间距",src:"2vertical.demo.tsx",code:`import { Button, Space } from "cui-solid"

export default () => {
    return <Space dir="v" inline>
        <Button>Button</Button>
        <Button>Button</Button>
        <Button>Button</Button>
    </Space>
}`,scopes:void 0,children:n(t.p,{children:["设置属性 ",e(t.code,{className:"sp-inline-code",children:"dir"})," 为 ",e(t.code,{className:"sp-inline-code",children:"v"})," 可以使相邻组件垂直排列。"]})}),e(d,{id:"size",title:"间距大小",src:"3size.demo.tsx",code:`import { Button, Slider, Space } from "cui-solid"
import { createSignal } from "solid-js";

export default () => {
    const [size, setSize] = createSignal(10);

    return <>
        <Space size={size()}>
            <Button>Button</Button>
            <Button>Button</Button>
            <Button>Button</Button>
        </Space>
        <Slider value={[size, setSize]}/>
    </>
}`,scopes:void 0,children:n(t.p,{children:["间距可以通过属性 ",e(t.code,{className:"sp-inline-code",children:"size"})," 设置，默认值为8。"]})}),e(d,{id:"align",title:"对齐方式",src:"4align.demo.tsx",code:`import { Button, Space } from "cui-solid"

export default () => {
    return <Space dir="v">
        <Space>
            <Space align="start" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>start</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
            <Space align="center" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>center</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
            <Space align="end" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>end</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
            <Space align="baseline" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>Baseline</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
        </Space>
        <Space>
            <Space align="center" justify="start" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>start</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
            <Space align="center" justify="center" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>center</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
            <Space align="center" justify="end" style={{border: '1px solid #dfdfdf', padding: '8px', width: '200px'}}>
                <span>end</span>
                <Button>Button</Button>
                <div style={{height: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '100px'}}>Block</div>
            </Space>
        </Space>
        <Space>
            <Space dir="v" align="start" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>start</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
            <Space dir="v" align="center" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>center</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
            <Space dir="v" align="end" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>end</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
        </Space>
        <Space>
            <Space dir="v" align="center" justify="start" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>start</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
            <Space dir="v" align="center" justify="center" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>center</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
            <Space dir="v" align="center" justify="end" style={{border: '1px solid #dfdfdf', padding: '8px', height: '150px'}}>
                <span>end</span>
                <Button>Button</Button>
                <div style={{width: '100px', background: 'rgba(200,200,200,0.3)', "line-height": '32px'}}>Block</div>
            </Space>
        </Space>
    </Space>
}`,scopes:void 0,children:e(t.p,{children:"设置对齐模式。"})}),n(t.h2,{id:"props",children:[e(t.a,{"aria-hidden":"true",tabIndex:"-1",href:"#props",children:e(t.span,{className:"icon icon-link"})}),"属性 "]}),n(t.table,{className:"sp-table",children:[e(t.thead,{children:n(t.tr,{children:[e(t.th,{style:{textAlign:"left"},children:"属性"}),e(t.th,{style:{textAlign:"left"},children:"说明"}),e(t.th,{style:{textAlign:"left"},children:"类型"}),e(t.th,{style:{textAlign:"left"},children:"默认值"})]})}),n(t.tbody,{children:[n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"classList"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"Object"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"class"}),e(t.td,{style:{textAlign:"left"},children:"自定义class"}),e(t.td,{style:{textAlign:"left"},children:"string"}),e(t.td,{style:{textAlign:"left"},children:"-"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"style"}),e(t.td,{style:{textAlign:"left"},children:"自定义样式"}),e(t.td,{style:{textAlign:"left"},children:"Object"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"justify"}),e(t.td,{style:{textAlign:"left"},children:"垂直轴对齐方式"}),e(t.td,{style:{textAlign:"left"},children:"start | center | end"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"align"}),e(t.td,{style:{textAlign:"left"},children:"当前轴居中方式"}),e(t.td,{style:{textAlign:"left"},children:"center | start | end | baseline"}),e(t.td,{style:{textAlign:"left"}})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"dir"}),e(t.td,{style:{textAlign:"left"},children:"内容方向"}),e(t.td,{style:{textAlign:"left"},children:"v | h"}),e(t.td,{style:{textAlign:"left"},children:"h"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"wrap"}),e(t.td,{style:{textAlign:"left"},children:"内容超出的换行方式"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"},children:"false"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"inline"}),e(t.td,{style:{textAlign:"left"},children:"行内元素"}),e(t.td,{style:{textAlign:"left"},children:"boolean"}),e(t.td,{style:{textAlign:"left"},children:"false"})]}),n(t.tr,{children:[e(t.td,{style:{textAlign:"left"},children:"size"}),e(t.td,{style:{textAlign:"left"},children:"间距大小"}),e(t.td,{style:{textAlign:"left"},children:"number"}),e(t.td,{style:{textAlign:"left"},children:"8"})]})]})]})]}),`
`,`
`,`
`,e(r,{data:[{id:"",depth:1,title:""},{id:"sp-demos",depth:2,title:"代码演示"},{id:"base",title:"基础用法",src:"1base.demo.tsx"},{id:"vertical",title:"垂直间距",src:"2vertical.demo.tsx"},{id:"size",title:"间距大小",src:"3size.demo.tsx"},{id:"align",title:"对齐方式",src:"4align.demo.tsx"},{id:"props",depth:2,title:"属性"}]})]})}function g(i={}){const{wrapper:t}=i.components||{};return t?e(t,{...i,children:e(l,{...i})}):l(i)}export{g as default,c as frontmatter};
